<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${blog.title}">博客详情页</title>
    <link rel="shortcut icon" href="../static/images/logo.ico"/>
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/prism.css">
    <link rel="stylesheet" href="../static/node_modules/tocbot/dist/tocbot.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../static/typo.css-master/typo.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>

<body>
<!--daohan-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-min m-shado-small"
     style="top: -20px;">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item m-paddend-font">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class=" home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class=" idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class=" tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i
                    class=" clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class=" info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <form name="searh" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui inverted transparent icon input">
                        <input type="text" name="query" placeholder="Search..." th:value="${query}">
                        <a style="color:#fff;"><i class="search icon" onclick="document.form['searh'].submit()"></i></a>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <a href="#" class="ui menu-toggle black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--contaner-->
<div id="waypoint" class="m-container-small m-padded-tb-large">
    <div class="ui container">
        <div class="ui top attached segment">
            <div class="ui  horizontal link list">
                <div class="item">
                    <img src="https://unsplash.it/100/100?image=1011" th:src="@{${blog.user.avater}}"
                         class="ui avatar image">
                    <div class="content"><a href="#" class="header m-paddend-font" th:text="${blog.user.nickname}">Backpackerxl</a>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2021-01-25</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i><span th:text="${blog.views}">100</span>
                </div>
            </div>
            <div class="ui attached segment animate__pulse">
                <img src="https://unsplash.it/800/450?image=1027" th:src="${blog.firstImg}"
                     class="ui rounded fluid image"
                     style="box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),0 8px 16px -8px hsla(0, 0%, 0%, 0.3),0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);">
            </div>
            <div class="ui attached padded segment">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label " th:text="${blog.flag}">转载</div>
                    <h2 class="ui center aligned header" th:text="${blog.title}">typo-selection的效果展示</h2>

                    <div id="contant" class="typo typo-selection js-toc-content m-padded-lr-reponsive m-padded-tb-large"
                         th:utext="${blog.content}">
                        <!--/*-->
                        <h2 id="section2">二、排版实例：</h2>

                        <p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
                            Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>

                        <h3 id="section2-1">例1：论语学而篇第一</h3>

                        <p>
                            <small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
                                <time>前551年9月28日－前479年4月11日</time>
                                ）
                            </small>
                        </p>

                        <h4>本篇引语</h4>

                        <p>
                            《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p>

                        <h4>原文</h4>

                        <p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>

                        <h4>译文</h4>

                        <p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p>

                        <h4>评析</h4>

                        <p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
                                title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
                        </p>

                        <p>
                            此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>

                        <p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>

                        <h3 id="section2-2">例2：英文排版</h3>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's
                            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                            scrambled it to make a
                            type specimen book. It has survived not only five centuries, but also the leap into
                            electronic typesetting, remaining
                            essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
                            containing Lorem Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker including
                            versions of Lorem
                            Ipsum.</p>
                        <blockquote>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna
                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.
                        </blockquote>

                        <h4>The standard Lorem Ipsum passage, used since the 1500s</h4>

                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna
                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                            pariatur. Excepteur sint
                            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                            laborum."</p>

                        <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>

                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam,
                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                            explicabo. Nemo enim ipsam
                            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                            dolores eos qui ratione
                            voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
                            consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem. Ut enim
                            ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                            aliquid ex ea commodi
                            consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
                            molestiae consequatur,
                            vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

                        <h4>List style in action</h4>
                        <ul>
                            <li>If you wish to succeed, you should use persistence as your good friend, experience as
                                your reference, prudence as
                                your brother and hope as your sentry.
                                <p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
                            </li>
                            <li>Sometimes one pays most for the things one gets for nothing.
                                <p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
                            </li>
                            <li>Only those who have the patience to do simple things perfectly ever acquire the skill to
                                do difficult things
                                easily.
                                <p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
                            </li>
                        </ul>

                        <h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there
                            will never have one
                        </h4>
                        <hr/>
                        <p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
                            <mark>"Few things are impossible in themselves; and it is often for want of will, rather
                                than of means, that man fails
                                to succeed".
                            </mark>
                            You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it
                            will works nice as the
                            demo you're watching now. The following code is the best way to render typo in Chinese:
                        </p>
                        <pre><code class="language-css">p { color: red }
</code><i class="copy link icon"></i></pre>
                        <pre class=" language-shell" tabindex="0">
                            <code class=" language-shell">yum <span
                                    class="token function">install</span> -y pcre pcre-devel
                            </code>
                            <i class="copy link icon"></i>
                        </pre>
                        <pre>
                              <code class="language-css">
                                /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
                                h1,h2,h3,h4,h5,h6 {
                                    line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
                                }
                                h1{font-size:1.8em;}
                                h2{font-size:1.6em;}
                                h3{font-size:1.4em;}
                                h4{font-size:1.2em;}
                                h5,h6{font-size:1em;}
                                
                                /* 现代排版：保证块/段落之间的空白隔行 */
                                .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
                                    margin:1em 0 0.6em;
                                }
                              </code>
                           <i class="copy link icon"></i>
                            </pre>

                        <h3 id="section3">三、附录</h3>

                        <h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
                        <table class="ui table" summary="Typo.css 排版偏重点">
                            <thead>
                            <tr>
                                <th>类型</th>
                                <th>语义</th>
                                <th>标签</th>
                                <th>注意点</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th rowspan="15">基础标签</th>
                                <td>标题</td>
                                <td><code>h1</code> ～ <code>h6</code></td>
                                <td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
                            </tr>
                            <tr>
                                <td>上、下标</td>
                                <td><code>sup</code>/<code>sub</code></td>
                                <td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
                            </tr>
                            <tr>
                                <td>引用</td>
                                <td><code>blockquote</code></td>
                                <td>显示/嵌套样式</td>
                            </tr>
                            <tr>
                                <td>缩写</td>
                                <td><code>abbr</code></td>
                                <td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
                            </tr>
                            <tr>
                                <td>分割线</td>
                                <td><code>hr</code></td>
                                <td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
                            </tr>
                            <tr>
                                <td>列表</td>
                                <td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
                                <td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
                            </tr>
                            <tr>
                                <td>定义列表</td>
                                <td><code>dl</code></td>
                                <td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
                            </tr>
                            <tr>
                                <td>选项</td>
                                <td><code>input[type=radio[, checkbox]]</code></td>
                                <td>与其他 <code>form</code> 元素排版时是否居中</td>
                            </tr>
                            <tr>
                                <td>斜体</td>
                                <td><code>i</code></td>
                                <td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
                            </tr>
                            <tr>
                                <td>强调</td>
                                <td><code>em</code></td>
                                <td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体
                                </td>
                            </tr>
                            <tr>
                                <td>加强</td>
                                <td><code>strong/b</code></td>
                                <td>显示为粗体</td>
                            </tr>
                            <tr>
                                <td>标记</td>
                                <td><code>mark</code></td>
                                <td>类似荧光笔</td>
                            </tr>
                            <tr>
                                <td>印刷</td>
                                <td><code>small</code></td>
                                <td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
                            </tr>
                            <tr>
                                <td>表格</td>
                                <td><code>table</code></td>
                                <td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
                            </tr>
                            <tr>
                                <td>代码</td>
                                <td><code>pre</code>/<code>code</code></td>
                                <td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
                            </tr>
                            <tr>
                                <th rowspan="5">特殊符号</th>
                                <td>着重号</td>
                                <td><em class="typo-em">在文字下加点</em></td>
                                <td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
                            </tr>
                            <tr>
                                <td>专名号</td>
                                <td><u>林建锋</u></td>
                                <td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
                            </tr>
                            <tr>
                                <td>破折号</td>
                                <td>——</td>
                                <td>保持一划，而非两划</td>
                            </tr>
                            <tr>
                                <td>人民币</td>
                                <td>&yen;</td>
                                <td>使用两平等线的符号，或者 HTML 实体符号 <code>&amp;yen;</code></td>
                            </tr>
                            <tr>
                                <td>删除符</td>
                                <td>
                                    <del>已删除（deleted）</del>
                                </td>
                                <td>一致化各浏览器显示，中英混排正确</td>
                            </tr>
                            <tr>
                                <th rowspan="3">加强类</th>
                                <td>专名号</td>
                                <td><code>.typo-u</code></td>
                                <td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
                            </tr>
                            <tr>
                                <td>着重符</td>
                                <td><code>.typo-em</code></td>
                                <td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
                            </tr>
                            <tr>
                                <td>清除浮动</td>
                                <td><code>.clearfix</code></td>
                                <td>与一般 CSS Reset 保持一对致 API</td>
                            </tr>
                            <tr>
                                <th rowspan="5">注意点</th>
                                <td colspan="3">（1）中英文混排行高/行距</td>
                            </tr>
                            <tr>
                                <td colspan="3">（2）上下标在 IE 中显示效果</td>
                            </tr>
                            <tr>
                                <td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
                            </tr>
                            <tr>
                                <td colspan="3">（4）input 多余空间问题</td>
                            </tr>
                            <tr>
                                <td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
                            </tr>
                            </tbody>
                        </table>

                        <h5 id="appendix2">2、开源许可</h5>
                        <!--*/-->
                    </div>
                    <!--biaoqian-->
                    <div class="m-padded-lr-reponsive">
                        <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}"
                             th:text="${tag.name}">方法论
                        </div>
                    </div>
                    <!--zansan-->

                    <div class="ui center aligned basic segment" th:if="${blog.appreciation}">
                        <button id="payButton" class="ui mini orange basic circular button">
                            打赏
                        </button>
                        <div class="ui payQR flowing popup transition hidden">

                            <div class="ui orange basic label">
                                <div class="ui images">
                                    <div class="images">
                                        <img th:src="@{#{index.pay}}" class="ui rounded bordered image m-mobile-image"
                                             style="width: 110px;">
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>


                </div>
            </div>
            <div class="ui attached positive message" th:if="${blog.shareStatement}">
                <div class="ui middle aligned grid">
                    <div class="fourteen wide column">
                        <div class="list">
                            <li>作者：<span th:text="${blog.user.username}">Backpackerxl</span><a href="#"
                                                                                               th:href="@{/about}"
                                                                                               target="_blank">(call
                                me)</a></li>
                            <li>发表时间：<span
                                    th:text="${#dates.format(blog.createTime,'yyyy-MM-dd HH:mm')}">2021-01-25</span>
                            </li>
                            <li>此文为转载如需引用请联系原作者，若非法引用产生一切版权纠纷，本人概不负责。</li>
                            <li>公众号转载：请在文末添加作者公众号二维码</li>
                        </div>
                    </div>
                    <div class="five wide column m-mobile-imags m-padden-imags">
                        <img th:src="@{#{index.Chat}}" class="ui right floated rounded  bordered"
                             style="width:110px; ">
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment" th:if="${blog.commentabled}">
                <!--liuyan-->
                <div id="comment-container" class="ui teal segment">
                    <div th:fragment="commentList">
                        <div class="ui comments" style="max-width: 100%;">
                            <h3 class="ui dividing header">评论</h3>
                            <div class="comment" th:each="comment : ${comments}">
                                <a class="avatar">
                                    <img src="https://unsplash.it/100/100?image=1027" th:src="@{${comment.avater}}">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${comment.nickname}">Matt</span>
                                        <div class="ui teal basic left pointing label m-padded-mini m-text-thin"
                                             th:if="${comment.adminComent}">博主
                                        </div>
                                        <span th:if="${comment.parentComment!=null}"
                                              th:text="|@ ${comment.parentComment.nickname}|" style="color: #00B5AD;">@小白</span>
                                    </a>
                                    <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(comment.cretateTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">
                                        How artistic!
                                    </div>
                                    <div class="actions">
                                        <a class="reply" data-commentid="1" data-comentnickname="Matt"
                                           th:attr="data-commentid=${comment.id},data-comentnickname=${comment.nickname}"
                                           onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                                <div class="comments" style="display: none;" th:if="${comment.replyComment!=null}">
                                    <div class="comment" th:each="reply : ${comment.replyComment}">
                                        <a class="avatar">
                                            <img src="https://unsplash.it/100/100?image=1027"
                                                 th:src="@{${reply.avater}}">
                                        </a>
                                        <div class="content">
                                            <a class="author">
                                                <span th:text="${reply.nickname}">小红</span><span
                                                    th:text="|@ ${reply.parentComment.nickname}|"
                                                    style="color: #00B5AD;">@小白</span>
                                            </a>
                                            <div class="metadata">
                                                <span class="date"
                                                      th:text="${#dates.format(reply.cretateTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                            </div>
                                            <div class="text" th:text="${reply.content}">
                                                How artistic!
                                            </div>
                                            <div class="actions">
                                                <a class="reply" data-commentid="1" data-comentnickname="Matt"
                                                   th:attr="data-commentid=${reply.id},data-comentnickname=${reply.nickname}"
                                                   onclick="reply(this)">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content" th:if="${#arrays.length(comment.replyComment) != 0}">
                                    <div style="line-height: 3em;" class="actions">
                                        <a class="reply" onclick="show(this)"
                                           th:attr="data-replynums=${#arrays.length(comment.replyComment)}">― 展开<span
                                                th:text="${#arrays.length(comment.replyComment)}"></span>条回复<i
                                                class="angle down icon"></i></a>
                                    </div>
                                </div>
                            </div>
                            <!--/*-->
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://unsplash.it/100/100?image=1027">
                                </a>
                                <div class="content">
                                    <a class="author">Elliot Fu</a>
                                    <div class="metadata">
                                        <span class="date">Yesterday at 12:30AM</span>
                                    </div>
                                    <div class="text">
                                        <p>This has been very useful for my research. Thanks as well!</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                                <div class="comments">
                                    <div class="comment">
                                        <a class="avatar">
                                            <img src="https://unsplash.it/100/100?image=1027">
                                        </a>
                                        <div class="content">
                                            <a class="author">Jenny Hess</a>
                                            <div class="metadata">
                                                <span class="date">Just now</span>
                                            </div>
                                            <div class="text">
                                                Elliot you are always so right :)
                                            </div>
                                            <div class="actions">
                                                <a class="reply">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://unsplash.it/100/100?image=1027">
                                </a>
                                <div class="content">
                                    <a class="author">Joe Henderson</a>
                                    <div class="metadata">
                                        <span class="date">5 days ago</span>
                                    </div>
                                    <div class="text">
                                        Dude, this is awesome. Thanks so much
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <!--*/-->
                        </div>
                    </div>

                </div>
                <div id="comment-form" class="ui form">
                    <input type="hidden" name="blog.id" th:value="${blog.id}">
                    <input type="hidden" name="parentComment.id" value="-1">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息....."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-mobile-bottom-small ">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名"
                                       th:value="${session.user}!=null ? ${session.user.nickname}">
                            </div>

                        </div>
                        <div class=" field m-mobile-wide m-mobile-bottom-small ">
                            <div class="ui left icon input ">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱"
                                       th:value="${session.user}!=null ? ${session.user.email}">
                            </div>

                        </div>
                        <div class="field m-mobile-wide m-mobile-bottom-small ">
                            <button id="commentpost-btn" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<div id="toolbar" class="m-padded m-fixed m-right-bootm" style="display: none;">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc-btn teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui button"><i class="weixin icon"></i></button>
        <button id="toTop" class="ui icon button"><i class="chevron up icon"></i></button>
    </div>
</div>
<div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
    <ol class="js-toc"></ol>
</div>
<div id="qrcode" class="ui weichartqr flowing popup transition hidden" style="width:130px;">

</div>
<br>
<br>
<!--bottom-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"
        style="bottom: -100px;">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechart.jpg" class="ui rounded image" style="width: 110px;">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin m-text-spaced m-text-mini">用户故事(User Story)</a>
                    <a href="#" class="item m-text-thin m-text-spaced m-text-mini">关于刻意练习的清单</a>
                    <a href="#" class="item m-text-thin m-text-spaced m-text-mini">失败要趁早</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin m-text-spaced m-text-mini">Email:946115360@qq.com</a>
                    <a href="#" class="item m-text-thin m-text-spaced m-text-mini">QQ:946115360</a>

                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Backpackerxl</h4>
                <p class="m-text-thin m-text-spaced m-text-mini">这是一个个人博客项目，本着对编程负责的态度写出来的，希望大家喜欢。</p>
            </div>

        </div>
        <div class="ui inverted section divider"></div>

        <p class="m-text-thin m-text-spaced m-text-mini">Copyright@2020-2021 BackpackerxlDesigned by
            Backpackerxl</p>
    </div>

</footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/node_modules/tocbot/dist/tocbot.min.js"></script>
<script src="../static/js/qrcode.min.js"></script>
<script src="../static/node_modules/jquery.scrollto/jquery.scrollTo.min.js"></script>
<script src="../static/node_modules/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="../static/js/main.js"></script>
<script src="../static/js/prism.js"></script>
<!--/*/</th:block>/*/-->
<script th:inline="javascript">
    var serurl = /*[[#{blog.url}]]*/"http://192.168.43.63:8888/blog/";
    var url1 = "blog/";
    var url = /*[[${blog.id}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl + url1 + url,
        width: 110,
        height: 110,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论类容'
                }],
            },
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }],
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请输入你的邮箱地址'
                }]
            }
        }
    });


    $(function () {
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"coments6");
    });
    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postDate();
        } else {
            console.log('校验失败');
        }
    });

    function postDate() {
        $("#comment-container").load(/*[[@{/comments}]]*/"", {
            "parentComment.id": $("[name='parentComment.id']").val(),
            "blog.id": $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {
            clearContent();
            // $(window).scrollTo($('#comment-container'),500)
        });
    }

    function clearContent() {
        $("[name='parentComment.id']").val(-1),
            $("[name='content']").val(''),
            $("[name='content']").attr("placeholder", "请输入评论信息....");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickName = $(obj).data('comentnickname');
        $("[name='content']").attr("placeholder", "@" + commentNickName).focus();
        $("[name='parentComment.id']").val(commentId);
        $(window).scrollTo($('#comment-form'), 500)
    }

    /**
     *显示或隐藏子级评论信息
     */
    function show(obj) {
        var node = $(obj);
        var childnode = node.parent().parent().prev();
        var content;
        var c;
        if (childnode.is(':hidden')) {
            childnode.slideDown(200)
            content = '― 收起';
            c = $('<i class="angle up icon"></i>');
        } else {
            childnode.slideUp(200)
            var nums = $(obj).data('replynums');
            content = `― 展开${nums}条回复`;
            c = $('<i class="angle down icon"></i>');
        }
        node.text(content);
        node.append(c);
    }

    const copy = $('i.copy.icon');

    copy.click(function () {
        navigator.clipboard
            .writeText($(this).prev().text())
            .then($(this).popup('change content', 'Copied to clipboard!'));
    });


    copy.popup({
        content: "Copy code",
        on: 'hover',
        position: 'top left'
    });
</script>
</body>

</html>